import ProCard from '@ant-design/pro-card';
import ProList from '@ant-design/pro-list';
import ProTable from '@ant-design/pro-table';
import { Button, Table } from 'antd';
import TextArea from 'antd/lib/input/TextArea';
import { result } from 'lodash';
import { useState } from 'react';
import './index.css';

const data = {
  "raw": "prefix vocab: <test://vocab>\nselect * where{\n[<he1>,<he2>] buildin:vertices ?p.\n?p vocab:friend ?p1.\n<he1> buildin:intersectEdges(\"顾问\",2) ?he3.\nfilter(?he3!=<he2>)\n}",
  "intermediate": [
    {
      "query": "select ?p where{[<he1>,<he2>] buildin:vertices ?p.}",
      "source": 1,
      "results": {
        "vars": ["p"],
        "bindings": [
          { "p": "<p1>" },
          { "p": "<p2>" }
        ]
      }
    }, {
      "query": "select ?p1 where{?p vocab:friend ?p1. } VALUES ?p {<p1> <p2>}",
      "source": 0,
      "results": {
        "vars": ["p1"],
        "bindings": [
          { "p1": "<p2>" }
        ]
      }
    }, {
      "query": "select ?he3 where{ <he1> buildin:intersectEdges(\"顾问\",2) ?he3. }",
      "source": 1,
      "results": {
        "vars": ["he3"],
        "bindings": [
          { "he3": "<he2>" },
          { "he3": "<he3>" },
          { "he3": "<he4>" }
        ]
      }
    }
  ],
  "results": {
    "vars": ["p", "p1", "he3"],
    "bindings": [
      { "p": "<p1>", "p1": "<p2>", "he3": "<he2>" },
      { "p": "<p1>", "p1": "<p2>", "he3": "<he3>" },
      { "p": "<p1>", "p1": "<p2>", "he3": "<he4>" }
    ]
  }
};
const query =
  data.raw
// 'select ?e1 ?hold where{?entity <file:///D:/d2rq-0.8.1/vocab/entity_id> "b963b6a1-5736-4a74-8fa3-e14954c70caa".?e1\t<file:///D:/d2rq-0.8.1/vocab/entity_hold>\t"b963b6a1-5736-4a74-8fa3-e14954c70caa".<file:///D:/d2rq-0.8.1/dump_with_link.nt#entity/b963b6a1-5736-4a74-8fa3-e14954c70caa> <file:///D:/d2rq-0.8.1/vocab/entity_hold> ?hold';
const dataSource = [
  {
    '数据源名称': 'entity3',
    存储数据: '股权数据',
  },
  {
    '数据源名称': 'HyperTest',
    存储数据: '超图数据',
  },
  {
    '数据源名称': 'PublicOpinion1',
    存储数据: '舆情数据',
  },
  {
    '数据源名称': 'PublicOpinion2',
    存储数据: '舆情数据',
  },
  {
    '数据源名称': 'PublicOpinion3',
    存储数据: '舆情数据',
  },
];

const intermediate = data.intermediate
// [
//   {
//     query:
//       'select * where { ?entity\t<file:///D:/d2rq-0.8.1/vocab/entity_id>\t"b963b6a1-5736-4a74-8fa3-e14954c70caa"^^<http://www.w3.org/2001/XMLSchema#string> .\n<file:///D:/d2rq-0.8.1/dump_with_link.nt#entity/b963b6a1-5736-4a74-8fa3-e14954c70caa>\t<file:///D:/d2rq-0.8.1/vocab/entity_hold>\t?hold .\n}',
//     source: 0,
//     results: [
//       [
//         'file:///D:/d2rq-0.8.1/dump_with_link.nt#entity/b963b6a1-5736-4a74-8fa3-e14954c70caa',
//         '',
//         'file:///D:/d2rq-0.8.1/dump_with_link.nt#hold/b963b6a1-5736-4a74-8fa3-e14954c70caa/a757e79c-1817-466c-be31-3241393ed443',
//       ],
//     ],
//   },
// ];

const results = data.results
// [
//   {
//     bindings: 'file:///D:/d2rq-0.8.1/dump_with_link.nt#entity/b963b6a1-5736-4a74-8fa3-e14954c70caa',

//     vars: 'entity',
//   },
//   {
//     bindings:
//       'file:///D:/d2rq-0.8.1/dump_with_link.nt#hold/b963b6a1-5736-4a74-8fa3-e14954c70caa/a757e79c-1817-466c-be31-3241393ed443',
//     vars: 'e1',
//   },
//   {
//     bindings:
//       'file:///D:/d2rq-0.8.1/dump_with_link.nt#hold/b963b6a1-5736-4a74-8fa3-e14954c70caa/a757e79c-1817-466c-be31-3241393ed443',
//     vars: 'hold',
//   },
//   {
//     bindings:
//       'file:///D:/d2rq-0.8.1/dump_with_link.nt#hold/b963b6a1-5736-4a74-8fa3-e14954c70caa/a757e79c-1817-466c-be31-3241393ed443',
//     vars: 'hold',
//   },
//   {
//     bindings:
//       'file:///D:/d2rq-0.8.1/dump_with_link.nt#hold/b963b6a1-5736-4a74-8fa3-e14954c70caa/a757e79c-1817-466c-be31-3241393ed443',
//     vars: 'hold',
//   },
// ];
// const bindingsRender = (record,index) => {
//   return (
//     <Table
//       dataSource={record.results.bindings[index]}
//       columns={record.results.vars.map((val)=>{return {title:val,dataIndex:val,ellipsis:true}})}
//     >
//     </Table>
//     // <p>{record.results}</p>
//   )
// }

const FED = () => {
  const [search, setSearch] = useState(false);
  const [loading, setLoading] = useState(false);
  const [expand, setExpand] = useState([0]);
  return (
    <>
      <ProCard ghost direction="row" gutter={8} style={{ marginTop: -15 }}>
        {/* SPARQL查询 */}
        <ProCard
          style={{ height: '30em', borderRadius: '8px', position: ' relative' }}
          colSpan={12}
          title={<b style={{ fontSize: '18px' }}>SPARQL查询</b>}
        >
          <Button
            style={{ position: 'absolute', right: 22, top: 15 }}
            type="primary"
            onClick={() => {
              setSearch(false);
              setLoading(true);
              setTimeout(() => {
                setLoading(false);
                setSearch(true);
              }, 1000);
            }}
          >
            查询
          </Button>
          <TextArea
            style={{ resize: 'none' }}
            placeholder="请输入查询语句"
            rows={14}
            defaultValue={query}
          ></TextArea>
          <br />
        </ProCard>

        {/* 中间子查询 */}
        <ProCard
          title={<b style={{ fontSize: '18px' }}>中间子查询</b>}
          style={{ height: '30em', borderRadius: '8px', overflow: 'auto' }}
        >
          <ProTable
            pagination={{ position: ['none', 'bottomCenter'], defaultPageSize: 5 }}
            options={false}
            defaultData={[{}]}
            toolBarRender={false}
            search={false}
            dataSource={search && intermediate.map((v, idx) => { return { ...v, _key: idx } })}
            loading={loading && !search}
            rowKey="_key"
            columns={[
              {
                dataIndex: 'source',
                title: '数据源',
                width: 60,
                align: 'center'
              },
              {
                dataIndex: 'query',
                title: '子查询式',
                ellipsis: true,
                align: 'center'
              },
              {
                dataIndex: 'results',
                title: '查询结果',
                ellipsis: true,
                render: (_, record) => JSON.stringify(record.results.bindings),
              },
            ]}
            expandable={{
              expandedRowRender: record => <Table
                size='small'
                dataSource={record.results.bindings}
                // rowKey="_key"
                onExpand={(expanded, record) => console.log(expanded, record)}
                columns={
                  search ? [{ dataIndex: 'index', valueType: 'indexBorder', width: 40 }, ...record.results.vars.map(v => { return { title: v, dataIndex: v } })] : []
                }
                pagination={false}
              >
              </Table>
            }}
          ></ProTable>
        </ProCard>
      </ProCard>

      <ProCard ghost direction="row" gutter={8} style={{ marginTop: 8 }}>
        {/* 系统已有数据源 */}
        <ProCard
          colSpan={12}
          title={<b style={{ fontSize: '18px' }}>系统已有数据源</b>}
          style={{ height: '30em', borderRadius: '8px' }}
        >
          <ProTable
            pagination={{ position: ['none', 'bottomCenter'], defaultPageSize: 5 }}
            dataSource={dataSource}
            toolBarRender={false}
            search={false}
            columns={[
              {
                dataIndex: 'index',
                valueType: 'indexBorder',
                width: 30
              },
              {
                dataIndex: '数据源名称',
                title: '数据源名称',
              },
              {
                dataIndex: '存储数据',
                title: '存储数据',
              },
            ]}
          ></ProTable>
        </ProCard>
        {/* 最终查询结果 */}
        <ProCard
          title={<b style={{ fontSize: '18px' }}>最终查询结果</b>}
          style={{ height: '30em', borderRadius: '8px' }}
        >
          <ProTable
            pagination={{ position: ['none', 'bottomCenter'], defaultPageSize: 5 }}
            options={false}
            defaultData={[{}]}
            toolBarRender={false}
            search={false}
            dataSource={search && results.bindings}
            loading={loading && !search}
            columns={
              search ? [{ dataIndex: 'index', valueType: 'indexBorder', width: 40 }, ...results.vars.map(v => { return { title: '?' + v, dataIndex: v } })] : []
            }
          ></ProTable>
        </ProCard>
      </ProCard>
    </>
  );
};

export default FED;
